<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="../css/common.css" rel="stylesheet">
<link href="../css/index.css" rel="stylesheet">
<link href="../css/baojing.css" rel="stylesheet">
<link rel="stylesheet" href="../css/content.css" />	
<script src="../js/jquery-1.8.3.min.js"></script>
<!--<script src="../js/gongdan/exporting.js"></script>-->
<script src="../js/gongdan/highcharts.js"></script>

<script src="../laydate/laydate.js"></script>
<title></title>
<style>

</style>
</head>

<body>

<div class="fanhui">
    <p><a href="#">车辆监控&nbsp;</a></p><p>&gt;&nbsp;</p><p><a href="#">车辆报修&nbsp;</a></p><p>&gt;&nbsp;</p><p><a href="#">工单管理&nbsp;</a></p>
</div>


<div class="demo3">
    <ul class="chaxunda">
    <li><p>开始时间：</p><input type="text" class="inline"  onClick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" id="start"></li>
    <li><p>结束时间：</p><input type="text" class="inline"  onClick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" id="end"></li>
    <li><p>车辆选择：</p><select><option>车辆选择</option><option>车辆选择</option></select>
    </li>
    <li><input type="button" value="查询" style=" background:#22abd4; color:#ffffff; text-align:center; padding:0;" class="showdiv"></li>  
    </ul>
</div>
<script>
!function(){
laydate.skin('molv');//切换皮肤，请查看skins下面皮肤库
laydate({elem: '#demo'});//绑定元素
}();
//日期范围限制
var start = {
    elem: '#start',
    format: 'YYYY-MM-DD',
    min: laydate.now(), //设定最小日期为当前日期
    max: '2099-06-16', //最大日期
    istime: true,
    istoday: false,
    choose: function(datas){
         end.min = datas; //开始日选好后，重置结束日的最小日期
         end.start = datas //将结束日的初始值设定为开始日
    }
};
var end = {
    elem: '#end',
    format: 'YYYY-MM-DD',
    min: laydate.now(),
    max: '2099-06-16',
    istime: true,
    istoday: false,
    choose: function(datas){
        start.max = datas; //结束日选好后，充值开始日的最大日期
    }
};
laydate(start);
laydate(end);
//自定义日期格式
laydate({
    elem: '#test1',
    format: 'YYYY年MM月DD日',
    festival: true, //显示节日
    choose: function(datas){ //选择日期完毕的回调
        alert('得到：'+datas);
    }
});
//日期范围限定在昨天到明天
laydate({
    elem: '#hello3',
    min: laydate.now(-1), //-1代表昨天，-2代表前天，以此类推
    max: laydate.now(+1) //+1代表明天，+2代表后天，以此类推
});
</script>


<div class="tongji">

    <div class="module fl">
    	<div id="dangqin" style="min-width:400px;height:400px"></div>
    </div>
  	<div class="module fr">
    	<div id="jinzhan" style="min-width:400px;height:400px"></div>
    </div>  
</div>
<script>
$(function () {
    $('#dangqin').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: '当前工单'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]
    });
});
</script>
<!--工单进展js开始-->
<script>
Highcharts.setOptions({
    lang:{
       contextButtonTitle:"图表导出菜单",
       decimalPoint:".",
       downloadJPEG:"下载JPEG图片",
       downloadPDF:"下载PDF文件",
       downloadPNG:"下载PNG文件",
       downloadSVG:"下载SVG文件",
       drillUpText:"返回 {series.name}",
       loading:"加载中",
       months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
       noData:"没有数据",
       numericSymbols: [ "千" , "兆" , "G" , "T" , "P" , "E"],
       printChart:"打印图表",
       resetZoom:"恢复缩放",
       resetZoomTitle:"恢复图表",
       shortMonths: [ "Jan" , "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul" , "Aug" , "Sep" , "Oct" , "Nov" , "Dec"],
       thousandsSep:",",
       weekdays: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期天"]
    }
}); 
$(function () {
    $('#jinzhan').highcharts({
        title: {
            text: '工单进展',
            x: -20 //center
        },
        subtitle: {
            text: '',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                         'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});
</script>
<!--工单进展js结束-->
<div class="nkbiaoth">
            <li style="width:4%">
              <div class="fu"><img src="../images/weixuanzhong.png" class="xiaosun" alt=""/></div>
              <input type="checkbox" class="btfxk" id="hao">
            </li>
            <li style="width:10%"><span>车牌号</span></li>
            <li style="width:10%"><span>车架号</span></li>
            <li style="width:10%"><span>车队</span></li>
            <li style="width:11%"><span>联系人</span></li>
            <li style="width:15%"><span>所在位置</span></li>
            <li style="width:15%"><span>创建时间</span></li>
            <li style="width:15%"><span>问题描述</span></li>
            <li style="width:10%"><span>状态</span></li>
        </div>
        <!--内容行-->
        <div class="lie">
        <ul>
        	<li style="width:4%">
              <div class="fu"><img src="../images/weixuanzhong.png" class="xiaosun" alt=""/></div>
              <input type="checkbox" class="btfxk">
            </li>
            <li style="width:10%"><span>苏 D123456</span></li>
            <li style="width:10%"><span>17位 </span></li>
            <li style="width:10%"><span>第一车队</span></li>
            <li style="width:11%"><span>张三</span></li>
            <li style="width:15%"><span>江苏常州太湖路</span></li>
            <li style="width:15%"><span>2016-10-23-23:13:42 </span></li>
            <li style="width:15%"><span>无法启动</span></li>
            <li style="width:10%"><span>待修</span></li>
        </ul> 
        <ul>
        	<li style="width:4%">
              <div class="fu"><img src="../images/weixuanzhong.png" class="xiaosun" alt=""/></div>
              <input type="checkbox" class="btfxk">
            </li>
            <li style="width:10%"><span>苏 D123456</span></li>
            <li style="width:10%"><span>17位 </span></li>
            <li style="width:10%"><span>第一车队</span></li>
            <li style="width:11%"><span>张三</span></li>
            <li style="width:15%"><span>江苏常州太湖路</span></li>
            <li style="width:15%"><span>2016-10-23-23:13:42 </span></li>
            <li style="width:15%"><span>无法启动</span></li>
            <li style="width:10%"><span>待修</span></li>
        </ul>
        <ul>
        	<li style="width:4%">
              <div class="fu"><img src="../images/weixuanzhong.png" class="xiaosun" alt=""/></div>
              <input type="checkbox" class="btfxk">
            </li>
            <li style="width:10%"><span>苏 D123456</span></li>
            <li style="width:10%"><span>17位 </span></li>
            <li style="width:10%"><span>第一车队</span></li>
            <li style="width:11%"><span>张三</span></li>
            <li style="width:15%"><span>江苏常州太湖路</span></li>
            <li style="width:15%"><span>2016-10-23-23:13:42 </span></li>
            <li style="width:15%"><span>无法启动</span></li>
            <li style="width:10%"><span>待修</span></li>
        </ul>
        <ul>
        	<li style="width:4%">
              <div class="fu"><img src="../images/weixuanzhong.png" class="xiaosun" alt=""/></div>
              <input type="checkbox" class="btfxk">
            </li>
            <li style="width:10%"><span>苏 D123456</span></li>
            <li style="width:10%"><span>17位 </span></li>
            <li style="width:10%"><span>第一车队</span></li>
            <li style="width:11%"><span>张三</span></li>
            <li style="width:15%"><span>江苏常州太湖路</span></li>
            <li style="width:15%"><span>2016-10-23-23:13:42 </span></li>
            <li style="width:15%"><span>无法启动</span></li>
            <li style="width:10%"><span>待修</span></li>
        </ul>
        </div>
        <script>
$("li>input").click(function(){
	if($(this).siblings().children().attr("src")=="../images/xuanzhong.png"){
		$(this).siblings().children().attr("src","../images/weixuanzhong.png")
		}
		else
		{
		$(this).siblings().children().attr("src","../images/xuanzhong.png")
		};
	});
$(function(){
	$('#sundashen').click(function(){
	var ss=$('#sundashen').parents('.jdxk1').siblings().find(":checkbox");
	var tt=$('#sundashen').parents('.jdxk1').siblings().find(".wenjing");
	for(var i=0; i<ss.length; i++){
		if($(this).attr('checked')){
			ss[i].checked=true;
			tt[i].src="../images/xuanzhong.png";
			}else{
				ss[i].checked=false;
				tt[i].src="../images/weixuanzhong.png";
				}
	
		}
	});
	$('#hao').click(function(){
		var k = $('#hao').parents('.nkbiaoth').siblings().find(':checkbox');
		var j = $('#hao').parents('.nkbiaoth').siblings().find('.xiaosun');
		for(var i=0; i<k.length; i++){
			if($(this).attr('checked')){
				k[i].checked=true;
				j[i].src="../images/xuanzhong.png";
				}else{
					k[i].checked=false;
					j[i].src="../images/weixuanzhong.png";
					}
			}
	});
	
})








</script>


       <!--分页-->
<!--分页-->
<div style="background:#06212e;">
<div class="fenye">
	
	<a href="#"><img src="../images/dingdanglxz.png"></a>
    <a href="#"><img src="../images/dingdanglxyl.png"></a>
    <a href="#"><input type="text" value="1"><span>/18</span></a>
    <a href="#"><img src="../images/dingdanglxzr.png"></a>
    <a href="#"><img src="../images/dingdanglxy.png"></a>
    <span>共<strong>4</strong>条</span>
</div>
</div>

</body>
</html>
